<script setup lang='ts'>
import { propObj } from './props';

defineOptions({
  name: 'VtEmpty',
})

defineProps(propObj)

</script>

<template>
  <div class='vt-empty__container'>
    <div class="vt-empty__warpper">

      <!-- empty default icon -->
      <svg v-if="!$slots.image" t="1709651592194" class="icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="4397" :width="imageSize ? imageSize : 200"
        :height="imageSize ? imageSize : 200">
        <path
          d="M831.7 369.4H193.6L64 602v290.3h897.2V602L831.7 369.4zM626.6 604.6c0 62.9-51 113.9-114 113.9s-114-51-114-113.9H117.5l103.8-198h582.5l103.8 198h-281zM502.2 131h39.1v140.6h-39.1zM236.855 200.802l27.647-27.647 99.419 99.418-27.648 27.648zM667.547 272.637l99.418-99.419 27.648 27.648-99.418 99.418z"
          p-id="4398" fill="#bfbfbf"></path>
      </svg>
      <div class="vt-empty__image">
        <slot name="image"></slot>
      </div>

      <!-- bottom slot -->
      <div class="vt-empty__description">
        <p v-if="!$slots.description">{{ description }}</p>
        <slot name="description"></slot>
      </div>

      <slot name="default"></slot>

    </div>
  </div>
</template>

<style scoped lang='scss'></style>